<?php
/**
 *@author Connor <caokang@foxmail.com>
 *@todo
 *@link www.zeevin.com
 */
if($model->avatar)$tmp = getimagesize(Utils::getAvatar($model->avatar));
	
?>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
<link href="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.imgareaselect/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var cuter={};
var status = 0;
<?php if($model->avatar):?>
function preview(img, selection){ 
	var scaleX = 100 / (selection.width || 1); 
	var scaleY = 100 / (selection.height || 1); 

	    //动态小头像 获取当前选中框的宽度，高度，左边框，右边框 
	    $('#view').css({                          //view是预览图像的id
	    	width: Math.round(scaleX * <?php echo $tmp[0];?>), 
	    	height: Math.round(scaleY * <?php echo $tmp[1];?>), 
	    	marginLeft: -Math.round(scaleX * selection.x1), 
	    	marginTop: -Math.round(scaleY * selection.y1) 
	    }); 
	    cuter={x1:selection.x1,y1:selection.y1,x2:selection.x2,y2:selection.y2,width:selection.width,height:selection.height};
	    console.log(cuter);
	} 
<?php endif;?>
    //加载小头像 
    $(document).ready(function () { 
    	<?php if($model->avatar):?>
    	$('<div><img id="view" src="<?php echo Utils::getAvatar($model->avatar);?>" style="width: 100px; height: 100px;"/></div>') 
    	.css({ 
    		float: 'left', 
    		position: 'relative', 
    		overflow: 'hidden', 
    		width: '100px', 
    		height: '100px' 
    	}) 
	    .insertAfter('#pshow'); //把新建元素放到 #pshow 之后
	    <?php endif;?>
	    $('#avatar').change(function(){
		var str = $(this).val().toLowerCase().split('.');
		var type =str[str.length-1];

		if(type=='png'||type=='jpg'||type=='jpeg'||type=='gif'||type=='bmp'){
			status = 1;
			$('#textfield').val($(this).val());
		}else{
			status = 0;
			alert("只能选择图片");
		}
	});
	    $('.ctrl_s_headpic').click(function(){
	    	if(cuter.width){
	    	$.get('?r=reg/avatar',cuter,function(data){
	    		data = $.parseJSON(data);
	    		alert(data.desc);
	    	});
	    }else{
	    	alert("请先选择头像区域");
	    }
	    
	    });
	    $('.upload_ctrl_s').click(function(){
		if(status!=0){
			$('#form1').submit();
		}else{alert("只能选择图片");}

	});

	}); 

<?php if($model->avatar):?>

    //初始化加载 
    $(window).load(function () { 
    	$('#cropbox').imgAreaSelect({ 
		    aspectRatio: '1:1',  //截取比例
		    show:true,
		    resizable:true, //是否可调整大小
		    autoHide: false,//选择框选择完毕是否自己取消 
		    handles:true,
		 //    show: true,
			// x1: 0,
			// y1: 0,
			// x2: 100,
			// y2: 100,
		    // imageHeight:<?php echo $tmp[0];?>,
		    // imagewidth:<?php echo $tmp[1];?>,
		    key:true, //是否启用键盘，默认为false
		    //x1: 75, y1: 30, x2: 225, y2: 180, //需要处理的区域，原始的
		    //x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
		    keys: { arrows: 1, ctrl: 5, shift: 'resize' }, //调整像素大小
		    //onInit: function(img, selection) { ias.setSelection(100, 50, 250, 150, true); ias.update(); }, //设置初始函数 画出选择框 
		    onSelectChange: preview  //选框移动时触发的事件
		    //onSelectEnd: getLocation  //选框结束时触发的事件
		    
		});
    });
    <?php endif;?>
    </script>	
    <!--main-->
    <div class="warpper">
    	<div class="container">
    		<div class="register">
    			<h1 class="tit">引导-修改头像</h1>
    			<div class="register_box">
    				<div class="revise">
    					<h1>添加或更改你的头像</h1>
    					<p class="color900">从电脑中选择你喜欢的照片:</p>
    					<p>
    						<?php if($msg['status']!=0):?>
    						<?php echo $msg['desc'],':', CHtml::error($model,'avatar');?>
    						<?else:?>
    						你可以上传JPG、JPEG、GIF、PNG或BMP文件。
    					<?php endif;?>
    				</p>
    				<div class="upload_file">
    					<form id="form1" action="?r=reg/avatar" method="post" enctype="multipart/form-data">
    						<?php echo CHtml::activeFileField($model,'avatar',array('id'=>'avatar','class'=>'file','size'=>28));?>
    						<input type='text' name='textfield' id='textfield' class='txt' disabled=disabled onclick="return false;"/>
    						<input type='button' class='btn1' onclick="$('#avatar').click();" value='浏览' />
    						<input type="button" class="btn2 upload_ctrl_s" value="上传照片" />
    					</form>
    				</div>
    				<?php if($model->avatar):?>
    				<div class="crop_headpic">
    					<div class="left">
    						<img src="<?php echo Utils::getAvatar($model->avatar);?>" alt="crop_headpic" id="cropbox"/></div>
    						<div class="right">
    							<p id='pshow' class="color900">这是你在之嗅上的头像图标</p>
    						</div>
    					</div>
    					<p>随意拖拽或缩放大图中的虚线方格，预览<br />的小图即为保存后的头像图标。</p>
    				<?php endif;?>
    					<div class="headpic_btn"><span class="ctrl_s_headpic">保存头像设置</span><span class="skip" onclick="location.href='?r=reg/tags'">下一步</span></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
